<div th:replace="header"></div>
<!-- <a class="layui-btn layui-btn-danger layui-btn-xs" id="new">新增</a> -->
<div class="layui-btn-group">
	<button class="layui-btn" id="new">增加</button>
</div>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="buttons">
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" >删除</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="edit" >编辑</a>
</script>
<div id="addForm"
	style="display: none; width: 500px; height: 350px; padding-top: 10px; padding-right: 10px;">

	<!-- 一个表单 -->
	<form class="layui-form" action="" lay-filter="select_renewal">
		<div class="layui-form-item">
			<label class="layui-form-label">班级</label>
			<div class="layui-input-block">
				<input type="text" name="name" lay-verify="name" autocomplete="off"
					placeholder="请输入班级" class="layui-input" id="inputname">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">系别</label>
			<div class="layui-input-block">
				<select name="did"  id="addDid">
				
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn layui-btn-normal" lay-submit
					lay-filter="formDemo">立即提交</button>
			</div>
		</div>
	</form>
</div>
<div id="editForm"
	style="display: none; width: 500px; height: 350px; padding-top: 10px; padding-right: 10px;">

	<!-- 一个表单 -->
	<form class="layui-form" action="" lay-filter="select_update">
		<div class="layui-form-item">
			<label class="layui-form-label">请修改名称</label>
			<div class="layui-input-block" >
				<input type="text" name="name" lay-verify="name" autocomplete="off"
					placeholder="请输入班级" class="layui-input" id="editname">
					<input type="hidden" name="id" id="editid"/>
					
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">系别</label>
			<div class="layui-input-block">
				<select name="did" id="editDid">
					
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn layui-btn-normal" lay-submit
					lay-filter="formedit">保存</button>
			</div>
		</div>
	</form>
</div>

<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

</form>



<script type="text/javascript">
	layui.use([ 'form', 'layedit', 'laydate' ,'table','layer','laypage',], function() {
		
		form = layui.form		//表单
		,layer = layui.layer		//弹窗
		,table = layui.table		//表格
		,laypage=layui.laypage		//分页
		,laydate = layui.laydate 	//日期
		;

		$.get("/clbum/query_deptname", {}, function(data) {
			console.log(data);
			for (var i = 0; i < data.length; i++) {
				var did = data[i].id;
				var name = data[i].name;
				//console.log(did);
				//console.log(name);
				console.log("这是did我接下来在点击修改时在select中要使用的="+did);
				//console.log("这是did="+data[i].id+"系别");
				console.log("这是班级的did相当于系表的id="+did+"系名"+name);
				$("#addDid").append("<option value='"+did+"'>" + name+ "</option>");//新增
			   $("#editDid").append("<option value='"+did+"'>" + name+ "</option>");//修改
				//将did与name传入select下拉框中
			}
			//for()循环遍历，将data数组中每一个对象的id，name放进did、name中
			form.render("select", "select_renewal");
			form.render("select", "select_update");
		});
		//自定义验证规则
		form.verify({
			name : function(value) {
				if (value.length < 4) {
					return '学院名至少四个字符';
				}
			}
		});
		//对"新增"按钮的事件
		$("#new").click(function() {
			//清空input数据
			$("input[name='name']").val("").focus();
			//数据校验
			index_add = layer.open({
				content : $("#addForm"),
				type : 1,
				maxWidth : 700,

				success: function(layero, index){
					$("#inputname").focus();
					//当弹出框加载成功后，实现.focus()光标聚焦
				  }
			});
		});
		//监听表单提交
		form.on('submit(formDemo)', function(formData) {
			//function()括号里的东西就是当前 模块 的数据
			layer.msg(JSON.stringify(formData.field));
			//以json格式输出
			console.log(formData); 
			$.post("/clbum/add", formData.field, function(data){
				layer.msg(data.msg);
				if(data.success){
					//关闭弹窗
					layer.close(index_add);
					//刷新数据表格数据
					clbumTable.reload();
					
				}else{
					//把光标定位到输入框
					$("#inputname").focus();
				}
			}, 'json');
			//在Controller中使用Object时，默认返回json格式数据，此处就无须说明'json'格式
			return false;
		});		
		//监听行工具事件
		 table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			 //obj当前获取的所有数据
			 //console.log(obj);   
			 var data = obj.data //获得当前行数据
			    ,layEvent = obj.event; //获得 lay-event 对应的值
			    console.log("我要的id"+data.id);
			    console.log("我要的did"+data.did);
			    if(layEvent === 'del'){
			      layer.confirm('真的删除行么', function(index){
			      //做数据库删除qingqiu
			      //http://localhost:8080/clbum/delete?id=100
			    	$.get("/clbum/delete", {id:data.id}, function(ajaxData){
			    		layer.msg(ajaxData.msg);
			    		//如果成功
			    		 if(ajaxData.success){
			    			clbumTable.reload({page: {
							    curr: 1 //重新从第 1 页开始
							  }});
			    			}
			 		});
			        layer.close(index);
			        //向服务端发送删除指令
			      });
			    } else if(layEvent === 'edit'){
			    	//把当前行数据填写到表单
			    	//提交表单到后台，更新数据库
			    	//如果成功，重载表格，关闭表单
			    	
			    	//这里和新增页面是一致的
					//console.log(obj.data)
					console.log("id="+obj.data.id);
			   		console.log("name="+obj.data.name);
					console.log("did="+obj.data.did);
			    	console.log("dname="+obj.data.dname);
			    	//在input框中给出数据
			    	$("#editname").val(obj.data.name);//这里传入的是班级的名字
			    	$("#editid").val(obj.data.id);//将班级的id传入隐藏的input中
			    	//将obj.data.name放入id=editname的input中
			    	
			    	$("#editDid").val(obj.data.did);//将（系的id）班级的did传入修改的select中
			    	
			    	//did代表了学院名将他放到select中
			    	
			    	form.render("select", "select_update");
			    	//layui的select需要更新渲染，才能达到预期要求
 
						//数据校验
						index_edit = layer.open({
							content : $("#editForm"),
							type : 1,
							maxWidth : 700,
							success : function(layero, index) {
								$("#editname").focus();
								//当弹出框加载成功后，实现.focus()光标聚焦
							}
						});
					}
			 });

				//监听编辑表单	
				form.on('submit(formedit)', function(formData) {
					layer.msg(JSON.stringify(formData.field));

					//目标是获取编辑之后的值
					//console.log($("#editname").val());
					$.post("/clbum/edit", formData.field, function(
							ajaxData) {
						//alert("aaaaaaaa");
						//layer.msg(ajaxData.msg);
						//如果成功
						if (ajaxData.success) {
							layer.close(index_edit);
							clbumTable.reload();

						} else {
							//把光标定位到输入框
							$("#editname").focus();
						}
					}, 'json');

					//在Controller中使用Object时，默认返回json格式数据，此处就无须说明'json'格式
					return false;
				});

				//这里是大表单

				layui.use('table', function() {
					var table = layui.table;

					//第一个实例
					clbumTable = table.render({
						elem : '#demo',
						// 				height : 600,
						url : '/clbum/select',
						page : {
							limit : 6
						}, //开启分页

						cols : [ [ {
							field : 'id',
							title : 'ID',
							width : 80,
							sort : true,
							fixed : 'left'
						}, {
							field : 'name',
							title : '班级',
							width : 200,
							sort : true
						}, {
							field : 'dname',
							title : '系名',
							width : 200,
							sort : true
						}, {
							filed : 'id',
							title : '操作',
							toolbar : "#buttons"
						} ] ]
					});

				});

			});

</script>
<script type="text/javascript">
	$(document).ready(
			function() {
				
			});
	//.ready()在全部文档加载完成后执行这里的代码
	$("#inputname").keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
             // Allow: Ctrl+A, Command+A
            (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) || 
             // Allow: home, end, left, right, down, up
            (e.keyCode >= 35 && e.keyCode <= 40)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });
	$("#editname").keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
             // Allow: Ctrl+A, Command+A
            (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) || 
             // Allow: home, end, left, right, down, up
            (e.keyCode >= 35 && e.keyCode <= 40)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });
</script>
<div th:replace="footer"></div>
